<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script type="module">
        import { utils_readCSV } from './utils/readcsv.ts';
        import { utils_loadgltf } from './utils/load_gltf.ts';
        // 轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
        import * as THREE from 'three';
        import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
        // 创建相机
        const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 8000);
        camera.position.set(0, 3000, 0)
        camera.lookAt(0, 0, 0);


        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        // 添加轨道控制器（可选，方便交互）
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;


        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000);


        // 添加环境光
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);

        // 添加平行光
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(5, 10, 7.5);
        scene.add(directionalLight);
        const gridHelper = new THREE.GridHelper(100);
        scene.add(gridHelper);

        // 加载gltf模型
        await utils_loadgltf('./gltf模型/A00086451_003_侧围外板总成-右.gltf', scene);
        await utils_loadgltf('./gltf模型/A00086435_003_侧围外板总成-左.gltf', scene);

        // 导入3d点数据
        const csvData = await utils_readCSV('./data3d.csv');
        console.log(csvData);

        // 用THREE.Points绘制3d点
        // 1. 准备数据
        const points = {}
        const points3d = {}
        csvData.forEach((item) => (points[item.point] = { x: item.x, y: item.y, z: item.z }))


        console.log(points);
        // 遍历对象的属性
        let pointCount = 0;
        for (const key in points) {
            if (points.hasOwnProperty(key)) {
                pointCount++;
                const point = points[key];
                console.log(key, point);

                // 2. 准备几何体
                // point 是对象{ x: item.x, y: item.y, z: item.z }
                // 我们需要将其转换为 THREE.Vector3 类型
                const geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(point.x, point.y, point.z)]);
                // 3. 准备材质

                let material;
                if (pointCount % 2 === 0) {
                    material = new THREE.PointsMaterial({ color: 0xfff000, size: 10 });
                } else {
                    material = new THREE.PointsMaterial({ color: 0x00ff00, size: 10 });
                }
                // 4. 合并几何体和材质
                points3d[key] = new THREE.Points(geometry, material);
                // 5. 添加到场景
                scene.add(points3d[key]);
            }
        }



        // })



        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();


    </script>
</body>

</html>